<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>添加银行卡</title>
    <link rel="stylesheet" href="../../fonts/font_awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../js/mui/css/mui.min.css">
    <link rel="stylesheet" href="../../css/mui-app-style.css">
    <link rel="stylesheet" href="../../css/cards_add.css">
    <style>
        /*#7C7C81*/
    </style>
</head>
<body class="mui-fullscreen">
<!--页面主结构开始-->
<div id="app" class="mui-views">
    <div class="mui-view">
        <div class="mui-navbar">
        </div>
        <div class="mui-pages">
        </div>
    </div>
</div>
<!--单页面开始-->
<div id="setting" class="mui-page">
    <!--页面标题栏开始-->
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span>
        </button>
        <h1 class="mui-center mui-title">添加银行卡</h1>
    </div>
    <!--页面标题栏结束-->
    <!--页面主内容区开始-->
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="mui-content cards">
                    <h5>请绑定本人的银行卡</h5>
                    <form class="mui-input-group">
                        <div class="mui-input-row">
                            <label>持卡人</label>
                            <input type="text" id="realname" placeholder="请输入持卡人">
                        </div>
                        <div class="mui-input-row">
                            <label>卡号</label>
                            <input type="text" id="cardno" placeholder="请输入银行卡号">
                            <a href="#account" class="mui-buss-btn">
                                <i class="mui-icon mui-icon-info"></i>
                            </a>
                        </div>
                    </form>
                    <br>
                    <div class="mui-button-df">
                        <a href="#idCardNo" id="toNext" class="mui-hidden">
                            点击链接到步骤2
                        </a>
                        <button type="button" id="next" class="mui-btn mui-btn-primary mui-btn-block">下一步</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--页面主内容区结束-->
</div>
<!--银行信息-->
<div id="account" class="mui-page">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span><!--添加银行卡-->
        </button>
        <h1 class="mui-center mui-title">快捷支付支持银行列表</h1>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll" id="busstable">
                <table>
                    <tr>
                        <td class="mui-col-xs-3" style="background: #F5F5F5;padding:10px 0;">银行</td>
                        <td class="mui-col-xs-3 " style="background: #F5F5F5;padding:10px 0">储蓄卡</td>
                        <td class="mui-col-xs-3 " style="background: #F5F5F5;padding:10px 0">信用卡</td>
                    </tr>
                    <tr>
                        <td class="mui-col-xs-3">建设银行</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                    </tr>
                    <tr>
                        <td class="mui-col-xs-3">交通银行</td>
                        <td class="mui-col-xs-3 color_gray">单笔10000单日10000</td>
                        <td class="mui-col-xs-3 color_gray">单笔20000单日50000</td>
                    </tr>
                    <tr>
                        <td class="mui-col-xs-3">光大银行</td>
                        <td class="mui-col-xs-3 color_gray">单笔5000单日5000</td>
                        <td class="mui-col-xs-3 color_gray">单笔5000单日5000</td>
                    </tr>
                    <tr>
                        <td class="mui-col-xs-3">中信银行</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                    </tr>
                    <tr>
                        <td class="mui-col-xs-3">浦发银行</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                    </tr>
                    <tr>
                        <td class="mui-col-xs-3">广发银行</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                    </tr>
                    <tr>
                        <td class="mui-col-xs-3">兴业银行</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                    </tr>
                    <tr>
                        <td class="mui-col-xs-3">华夏银行</td>
                        <td class="mui-col-xs-3 color_gray">单笔10000单日10000</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                    </tr>
                    <tr>
                        <td class="mui-col-xs-3">招商银行</td>
                        <td class="mui-col-xs-3 color_gray">单笔5000单日5000</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                    </tr>
                    <tr>
                        <td class="mui-col-xs-3">平安银行</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                    </tr>
                    <tr>
                        <td class="mui-col-xs-3">上海银行</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                    </tr>
                    <tr>
                        <td class="mui-col-xs-3">北京银行</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                    </tr>
                    <tr>
                        <td class="mui-col-xs-3">中国银行</td>
                        <td class="mui-col-xs-3 color_gray">不支持</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                    </tr>
                    <tr>
                        <td class="mui-col-xs-3">邮储银行</td>
                        <td class="mui-col-xs-3 color_gray">不支持</td>
                        <td class="mui-col-xs-3 color_gray">单笔50000单日50000</td>
                    </tr>
                </table>

            </div>
        </div>
    </div>
</div>
<!--身份证和手机-->
<div id="idCardNo" class="mui-page">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span><!--添加银行卡-->
        </button>
        <h1 class="mui-center mui-title">添加银行卡</h1>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll cards" >
                <h5>请填写银行卡信息</h5>
                <form class="mui-input-group">
                    <div class="mui-input-row">
                        <label>卡类型</label>
                        <input disabled type="text" value="卡类型" placeholder="卡类型">
                    </div>
                </form>
                <div style="height:10px;"></div>
                <form class="mui-input-group">
                    <div class="mui-input-row">
                        <label>身份证</label>
                        <input type="text" id="idcard" placeholder="请输入身份证号">
                    </div>
                    <div class="mui-input-row">
                        <label>手机号码</label>
                        <input type="text" id="phone" placeholder="银行卡预留手机号码">
                        <a href="javascript:;" class="mui-buss-btn mui-phone-btn">
                            <i class="mui-icon mui-icon-info"></i>
                        </a>
                    </div>
                </form>
                <div class="mui-row" style="padding:8px 0;">
                    <div class="mui-col-xs-12">
                        <span style="margin-left:10px;">
                            <span class="fa fa-check-circle" style="margin-right:5px;color: rgb(45, 140, 240)"></span>同意
                        </span>
                        <a href="#agreement" style="margin-top:0px;display: inline-block">
                            &lt;&lt;快捷支付绑卡协议&gt;&gt;
                        </a>
                    </div>
                </div>
                <div class="mui-button-df">
                    <a href="#authcode" id="toEnd" class="mui-hidden">
                        点击链接到步骤3
                    </a>
                    <button type="button" id="next2" class="mui-btn mui-btn-primary mui-btn-block">同意协议并绑卡</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--服务协议-->
<div id="agreement" class="mui-page">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span><!--添加银行卡-->
        </button>
        <h1 class="mui-center mui-title">服务协议</h1>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll cards" >
                <div class="mui-content">
                    服务协议
                </div>
            </div>
        </div>
    </div>
</div>
<!--验证码-->
<div id="authcode" class="mui-page">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span><!--添加银行卡-->
        </button>
        <h1 class="mui-center mui-title">验证手机号</h1>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll cards" >
                <div class="mui-text-center" style="padding:20px;background: #fff;">
                    <div>本次操作需要短信验证码</div>
                    <div>
                        请输入132****5678收到的短信验证码
                    </div>
                </div>
                <div style="height: 10px;"></div>
                <form class="mui-input-group">
                    <div class="mui-input-row">
                        <label>验证码</label>
                        <input id="phoneCode" type="number" maxlength="6"  placeholder="请输入验证码">
                    </div>
                </form>
                <div style="height: 30px;"></div>
                <div class="mui-button-df">
                    <button type="button" id="submit" class="mui-btn mui-btn-primary mui-btn-block">下一步</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../js/mui/js/mui.min.js"></script>
<script src="../../js/mui-view/mui.view.js"></script>
<script src="../../js/common/crypto-js.js"></script>
<script src="../../js/common/common.js"></script>
<script src="../../js/cards/cards_add.js"></script>
</body>
</html>